<template>
  <div class="user">
    <basic-container>
      <avue-crud
        ref="crud"
        v-model="form"
        :option="option"
        :page="page"
        :table-loading="listLoading"
        :before-open="handleOpenBefore"
        :data="list"
        @on-load="getList"
        @size-change="sizeChange"
        @current-change="currentChange"
        @search-change="handleFilter"
        @refresh-change="handleRefreshChange"
        @row-click="rowClick"
      >
        <template slot="menuLeft">
           <el-button
            @click="topToDetail()"
          >数据库表
          </el-button>
        </template>

        <!-- <template
          slot="menu"
          slot-scope="scope"
        >
          <el-button
            type="text"
            icon="el-icon-tickets"
            @click="toDetail(scope.row)"
          >数据库表
          </el-button>
        </template> -->
      </avue-crud>
    </basic-container>
  </div>

</template>

<script>
// import { doGet, doPost, doDelet, doPut } from '@/router/axios'
// import { mapGetters } from 'vuex'
import { formCreate } from "@/api/index";


export default {
  name: 'TableUser',
  data() {
    return {
      option: tableOption,
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      page: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20, // 每页显示多少条,
        isAsc: false,// 是否倒序
        // pageSizes: [1,2,3,10]
      },
      list: [],
      listLoading: true,
      form: {}
    }
  },
  computed: {

  },
  watch: {

  },
  created() {

  },
  methods: {
     rowClick(row,event,column) {
      //  this.selectionClear()
       console.log(row,event,column,'row,event,column')
       console.log(this.$refs.crud,'this.$refs.crud')
      // 点击表格行
      if (this.$refs.crud.$refs.table) {
        this.$refs.crud.$refs.table.clearSelection();
      }
      this.$refs.crud.$refs.table.toggleRowSelection(row, true);
    },
    // 上方操作
    topToDetail(){
      let selection = this.$refs.crud.$refs.table.selection
       if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      console.log(selection,'selectionselectionselection')
       this.$router.push({
        path: '/form/option',
        query: {
          id: selection[0].dataSourceId,
          databaseName: selection[0].dataSourceName
        }
      })

    },
    // 选择改变
    selectionChange(){

    },
    getList(page, params) {
      if (params == undefined || params == null || params == '') {
        params = {}
      }
     this.listLoading = false
      params.page = page.current - 1
      params.size = page.size
      // doGet('/oneline/databaseInfo/page', params).then(res => {
      //   this.list = res.data.data.dataList
      //   this.page.total = res.data.data.totalElements
      //   this.listLoading = false
      // })
      formCreate.databaseInfoPage(params).then(res => {
        this.list = res.datas.rows
        this.page.total = res.datas.total
      })
    },
    sizeChange(size) {
      this.page.size = size
      this.page.current = 1
      this.getList(this.page)
    },
    currentChange(current) {
      this.page.current = current
      this.getList(this.page)
    },
    handleFilter(param, done) {
      this.page.current = 1
      this.getList(this.page, param)
      done()
    },
    handleRefreshChange() {
      this.getList(this.page)
    },
    handleOpenBefore(show, type) {
      window.boxType = type
      // 若是编辑、查看回显名称
      if (['edit', 'views'].includes(type)) {

      } else if (type === 'add') {

      }
      show()
    },
    // 跳转表单开发页面
    toDetail(row) {
      this.$router.push({
        path: '/form/option',
        query: {
          id: row.dataSourceId,
          databaseName: row.dataSourceName
        }
      })
    }
  }
}

export const tableOption = {
  border: false,
  index: false,
  indexLabel: '序号',
  stripe: false,
  menuAlign: 'center',
  searchMenuSpan: 6,
  editBtn: false,
  delBtn: false,
  align: 'center',
  addBtn: false,
  selection: true,
  menu: false,
  column: [
    {
    fixed: true,
    label: 'id',
    prop: 'id',
    span: 24,
    hide: true,
    editDisplay: false,
    addDisplay: false
  },
  {
    fixed: true,
    label: '名称',
    prop: 'dataSourceName',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入名称'
    },
    {
      min: '0',
      max: '50',
      message: '长度在 0 到 50 个字符',
      trigger: 'blur'
    }
    ],
    search: true,
    span: 14
  },
  {
    fixed: true,
    label: '应用模块',
    prop: 'moduleCode',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入编码'
    },
    {
      min: '0',
      max: '20',
      message: '长度在 0 到 20 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
  // {
  //   fixed: true,
  //   label: '类型',
  //   prop: 'type',
  //   type: 'select',
  //   dicUrl: '/api-sys/sys/dict/autoCache/D000003',
  //   editDisplay: true,
  //   addDisplay: true,
  //   rules: [{
  //     required: true,
  //     trigger: 'blur',
  //     message: '请输入类型'
  //   }
  //   ],
  //   search: true,
  //   span: 12
  // },
  // {
  //   fixed: true,
  //   label: '状态',
  //   prop: 'status',
  //   type: 'select',
  //   dicUrl: '/api-sys/sys/dict/autoCache/D000004',
  //   editDisplay: true,
  //   addDisplay: true,
  //   rules: [{
  //     required: true,
  //     trigger: 'blur',
  //     message: '请输入状态'
  //   }
  //   ],
  //   search: true,
  //   span: 12
  // },
  {
    fixed: true,
    label: '数据源url',
    prop: 'url',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入数据库地址'
    },
    {
      min: '0',
      max: '300',
      message: '长度在 0 到 300 个字符',
      trigger: 'blur'
    }
    ],
    hide: false,
    span: 24
  },
  {
    fixed: true,
    label: '用户',
    prop: 'username',
    editDisplay: true,
    addDisplay: true,
    rules: [{
      required: true,
      trigger: 'blur',
      message: '请输入用户名'
    },
    {
      min: '0',
      max: '30',
      message: '长度在 0 到 30 个字符',
      trigger: 'blur'
    }
    ],
    span: 12
  },
   {
    fixed: true,
    label: '数据库类型',
    prop: 'datasourceType',
    editDisplay: true,
    addDisplay: true,
    span: 12
  },
  // {
  //   fixed: true,
  //   label: '密码',
  //   prop: 'databasePassword',
  //   editDisplay: true,
  //   addDisplay: true,
  //   rules: [{
  //     required: true,
  //     trigger: 'blur',
  //     message: '请输入密码'
  //   },
  //   {
  //     min: '0',
  //     max: '50',
  //     message: '长度在 0 到 50 个字符',
  //     trigger: 'blur'
  //   }
  //   ],
  //   hide: true,
  //   span: 12
  // },
  // {
  //   fixed: true,
  //   label: '备注',
  //   prop: 'remark',
  //   type: 'textarea',
  //   editDisplay: true,
  //   addDisplay: true,
  //   rules: [{
  //     required: true,
  //     trigger: 'blur',
  //     message: '请输入备注'
  //   },
  //   {
  //     min: '0',
  //     max: '200',
  //     message: '长度在 0 到 200 个字符',
  //     trigger: 'blur'
  //   }
  //   ],
  //   hide: true,
  //   span: 24
  // },
  // {
  //   fixed: true,
  //   label: '创建时间',
  //   prop: 'createTime',
  //   editDisplay: false,
  //   addDisplay: false,
  //   span: 12
  // },
  // {
  //   fixed: true,
  //   label: '更新时间',
  //   prop: 'updateTime',
  //   editDisplay: false,
  //   addDisplay: false,
  //   span: 12
  // }
  ]
}

</script>
<style lang="scss" scoped>
/deep/.avue-crud__right {
  /deep/.el-button{
    min-width: 10px;
  }
}

</style>
